<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="首页" fixed />
    
    <!-- 搜索框 -->
    <div class="search-container">
      <van-search
        v-model="searchValue"
        placeholder="请输入搜索关键词"
        shape="round"
      />
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 轮播图 -->
      <van-swipe class="swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banners" :key="index">
          <img :src="item.image" />
        </van-swipe-item>
      </van-swipe>

      <!-- 功能导航 -->
      <van-grid :column-num="4">
        <van-grid-item
          v-for="(item, index) in navItems"
          :key="index"
          :icon="item.icon"
          :text="item.text"
        />
      </van-grid>

      <!-- 列表内容 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item" :title="item" />
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  NavBar,
  Search,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  List,
  Cell
} from 'vant'

const searchValue = ref('')
const loading = ref(false)
const finished = ref(false)
const list = ref([])

const banners = ref([
  { image: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg' },
  { image: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg' }
])

const navItems = [
  { icon: 'photo-o', text: '功能一' },
  { icon: 'photo-o', text: '功能二' },
  { icon: 'photo-o', text: '功能三' },
  { icon: 'photo-o', text: '功能四' }
]

const onLoad = () => {
  // 模拟异步加载
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(`列表项 ${list.value.length + 1}`)
    }
    loading.value = false
    if (list.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}
</script>

<style scoped>
.home {
  padding-top: 46px;
  padding-bottom: 50px;
}

.search-container {
  padding: 10px;
}

.swipe {
  height: 160px;
}

.swipe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  background: #fff;
}
</style> 